<template>
  <div class="simple-test">
    <h2>简单Tinyflow测试</h2>

    <div class="status">
      <p>状态: {{ status }}</p>
      <p>错误: {{ error }}</p>
    </div>

    <div class="designer-container">
      <div ref="tinyflowContainer" class="tinyflow-canvas"></div>
    </div>

    <div class="controls">
      <button @click="checkInstance">检查实例</button>
      <button @click="getData">获取数据</button>
      <button @click="addTestNode">添加测试节点</button>
    </div>

    <div class="data-display">
      <h3>工作流数据</h3>
      <pre>{{ workflowData }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Tinyflow } from '@tinyflow-ai/ui';
import '@tinyflow-ai/ui/dist/index.css';

const tinyflowContainer = ref<HTMLElement>();
let tinyflowInstance: any = null;
const workflowData = ref('');
const status = ref('未初始化');
const error = ref('');

// 简单的Provider配置
const simpleProvider = {
  internal: () => [
    {
      value: 'test-node',
      label: '测试节点',
      icon: 'ant-design:play-circle-outlined',
    },
  ],
  knowledge: () => [],
  llm: () => [],
};

// 简单的自定义节点
const simpleCustomNodes = {
  'custom-test': {
    title: '自定义测试节点',
    description: '这是一个测试自定义节点',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"></path></svg>',
    sortNo: 1,
    group: 'base' as const,
    render: (parent: any, node: any, flowInstance: any) => {
      console.log('渲染自定义节点:', { parent, node, flowInstance });
      parent.innerHTML = `
        <div style="padding: 8px; background: #f0f0f0; border-radius: 4px;">
          <div style="font-weight: bold; margin-bottom: 4px;">自定义测试节点</div>
          <div style="font-size: 12px; color: #666;">这是一个测试节点</div>
        </div>
      `;
    },
    onUpdate: (parent: any, node: any) => {
      console.log('自定义节点更新:', node);
    },
  },
};

// 初始化Tinyflow
onMounted(() => {
  if (tinyflowContainer.value) {
    status.value = '正在初始化...';
    error.value = '';

    console.log('开始初始化Tinyflow...');
    console.log('容器元素:', tinyflowContainer.value);
    console.log('Provider配置:', simpleProvider);
    console.log('自定义节点配置:', simpleCustomNodes);

    try {
      tinyflowInstance = new Tinyflow({
        element: tinyflowContainer.value,
        data: {
          nodes: [],
          edges: [],
          viewport: { x: 0, y: 0, zoom: 1 },
        },
        provider: simpleProvider,
        customNodes: simpleCustomNodes,
      });

      console.log('Tinyflow实例创建成功:', tinyflowInstance);
      status.value = '初始化成功';

      // 检查实例方法
      console.log('实例方法:', Object.getOwnPropertyNames(tinyflowInstance));
      console.log('getData方法:', typeof tinyflowInstance.getData);
    } catch (err: any) {
      console.error('Tinyflow初始化失败:', err);
      error.value = err.message || '初始化失败';
      status.value = '初始化失败';
    }
  } else {
    error.value = '容器元素未找到';
    status.value = '初始化失败';
  }
});

// 销毁Tinyflow
onUnmounted(() => {
  if (tinyflowInstance) {
    try {
      tinyflowInstance.destroy();
      tinyflowInstance = null;
      console.log('Tinyflow实例已销毁');
    } catch (err: any) {
      console.error('Tinyflow销毁失败:', err);
    }
  }
});

// 检查实例
const checkInstance = () => {
  if (tinyflowInstance) {
    console.log('Tinyflow实例存在:', tinyflowInstance);
    console.log('实例类型:', typeof tinyflowInstance);
    console.log('实例方法:', Object.getOwnPropertyNames(tinyflowInstance));
    status.value = '实例检查完成';
  } else {
    console.log('Tinyflow实例不存在');
    status.value = '实例不存在';
  }
};

// 获取数据
const getData = () => {
  if (tinyflowInstance) {
    try {
      const data = tinyflowInstance.getData();
      workflowData.value = JSON.stringify(data, null, 2);
      console.log('获取到工作流数据:', data);
      status.value = '数据获取成功';
    } catch (err: any) {
      console.error('获取数据失败:', err);
      error.value = err.message || '获取数据失败';
      status.value = '数据获取失败';
    }
  } else {
    error.value = 'Tinyflow实例未初始化';
    status.value = '实例未初始化';
  }
};

// 添加测试节点
const addTestNode = () => {
  if (tinyflowInstance) {
    try {
      // 尝试添加一个测试节点
      console.log('尝试添加测试节点...');
      status.value = '正在添加节点...';

      // 这里需要根据Tinyflow的API来添加节点
      // 由于不确定具体的API，我们先记录一下
      console.log(
        'Tinyflow实例方法:',
        Object.getOwnPropertyNames(tinyflowInstance),
      );

      status.value = '节点添加尝试完成';
    } catch (err: any) {
      console.error('添加节点失败:', err);
      error.value = err.message || '添加节点失败';
      status.value = '添加节点失败';
    }
  } else {
    error.value = 'Tinyflow实例未初始化';
    status.value = '实例未初始化';
  }
};
</script>

<style lang="less" scoped>
.simple-test {
  padding: 24px;

  h2 {
    margin-bottom: 16px;
    color: #1890ff;
  }

  .status {
    margin-bottom: 16px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 6px;

    p {
      margin: 4px 0;
      font-family: monospace;
      font-size: 14px;
    }
  }

  .designer-container {
    height: 400px;
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;

    .tinyflow-canvas {
      height: 100%;
      width: 100%;
      background: #fafafa;
    }
  }

  .controls {
    margin-bottom: 24px;

    button {
      margin-right: 12px;
      padding: 8px 16px;
      background: #1890ff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #40a9ff;
      }
    }
  }

  .data-display {
    h3 {
      margin-bottom: 12px;
      color: #333;
    }

    pre {
      background: #f5f5f5;
      padding: 16px;
      border-radius: 6px;
      overflow: auto;
      max-height: 300px;
      font-size: 12px;
      border: 1px solid #e8e8e8;
    }
  }
}
</style>
